<template>
	<div>
		<div class="flex">
			<div class="tit_wrap" style="flex-shrink:0">
				<div class="flex align-center">
					<div class="flex1 top_tit_item active">货品信息</div>
				</div>

				<div class="tit_item" :class="{ active: current == index }" v-for="(item, index) in options"
					:key="index" @click="toggle(item, index)">{{ item.label }}</div>
			</div>
			<div class="flex1">
				<div style="padding: 16px 16px 0 16px">
					<div class="flex ele-bg-white huopin">
						<div style="
							display: inline-block;
							max-width:130px;
							height: auto;
							background-color: #001529;
						">
							<div class="tit_item">货品种类</div>
							<div class="tit_item" :class="{ active: midCurrent == index }"
								v-for="(item, index) in midOptions" :key="index" @click="midToggle(item, index)">
								{{ item.label }}
							</div>
						</div>
						<div class="flex1" style="padding: 0 15px 15px 15px">
							<div class="flex align-center right_wrap">
								<div class="tit_item" :class="{ active: rightCurrent == index }"
									@click="rightToggle(item, index)" v-for="(item, index) in rightOptions"
									:key="index">{{ item.label }}</div>
							</div>
							<GoodsTemplate v-if="info.goods_category_code" ref="tableRef"
								:api-fun="get_column_templete_list" :info="info" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import zbTable from '@/components/zbTable/templateIndex.vue';
	import GoodsTemplate from '@/components/zbTable/GoodsTemplateIndex.vue';
	import {
		PlusOutlined,
		UploadOutlined,
		ClearOutlined,
		RestOutlined
	} from '@ant-design/icons-vue';
	import {
		message
	} from 'ant-design-vue';
	import {
		get_list,
		get_goods_category_list,
		get_column_templete_list
	} from '@/api/material/receipts_templete';

	const loading = ref(false);
	// 获取子组件
	const tableRef = ref(null);
	const current = ref(0);
	const oldOptions = ref([]);
	const options = ref([{
			label: '首饰采购模板',
			value: 1
		},
		{
			label: '饰品采购模板',
			value: 2
		}
	]);
	const midOptions = ref([]);
	const midCurrent = ref(0);
	const rightCurrent = ref(0);
	const rightOptions = ref([{
			label: '基本信息',
			value: 'sku_info'
		},
		{
			label: '主石信息',
			value: 'main_stone'
		},
		{
			label: '副石信息',
			value: 'vice_stone'
		}
	]);

	const info = reactive({
		receipts_type: options.value[0].value,
		goods_category_code: '',
		type: rightOptions.value[0].value,
		page: 1
	});

	onMounted(() => {
		get_goods_category_list({
			page: 1,
			page_size: 9999
		}).then((res) => {
			res.forEach((item) => {
				midOptions.value.push({
					label: item.name,
					value: item.code
				});
				if (midOptions.value.length > 0) {
					info.goods_category_code = midOptions.value[0].value;
				}
			});
		});
	});

	const toggle = (item, index) => {
		current.value = index;
		info.receipts_type = item.value;
		tableRef.value.changeType(info);
	};
	//选择货品种类
	const midToggle = (item, index) => {
		midCurrent.value = index;
		info.goods_category_code = midOptions.value[index].value;
		tableRef.value.changeType(info);
	};
	//选择基本信息，主石信息，副石信息
	const rightToggle = (item, index) => {
		rightCurrent.value = index;
		info.type = item.value;
		tableRef.value.changeType(info);
	};
</script>

<style lang="less" scoped>
	.right_wrap {
		margin-top: 0;
	}
</style>